<template>
    <div>
        <div class="top">
            <div class="title">注册</div>
            <p>注册成为会员，享受更多折扣！</p>
        </div>
        <div class="table">
            <Input
                type="text"
                placeholder="请输入用户名"
                tipText="用户名为4-16位的字母数字下划线"
                rule="^[a-zA-Z0-9_-]{4,16}$"
                @getContent="username => this.username = username"
            />
            <Input 
            type="text" 
            placeholder="请输入手机号" 
            tipText="手机号格式校验错误" 
            rule="^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$"
            @getContent = " phone => this.phone = phone"/>
            <Input 
            type="password"
            placeholder="请输入密码" 
            tipText="至少包含八个字符，至少一个字母和一个数字"
            rule="^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$"
            @getContent = "password => this.password = password"/>
            <button id="submit" @click="requestRegister">注册</button>
            <p id="goRegister" @click="$router.push('/login')">注册完成？点击前往登陆</p>
        </div>

        <div class="goback" @click="$router.go(-1)">
            <img src="@/assets/left.png" alt="">
            <span>返回</span>
        </div>
        <Tip v-show="tips.isTips" :tipsText="tips.text"/>
    </div>
</template>

<script>
    import Input from '@/components/Input'
    import {mapState} from 'vuex'
    export default {
        name:"Register-View",
        components:{Input,},
        data(){
            return {
                username:"",
                password:"",
                phone:""
            }
        },
        methods: {
            requestRegister(){
                const user = {
                    username : this.username,
                    password : this.password,
                    phone : this.phone
                }
                this.$store.dispatch('User/requestRegister',user)
            }
        },
        computed:{
            ...mapState('User',['tips'])
        }
    }
</script>

<style scoped lang="less">
    .goback{
        width: 14.7vw;
        position: absolute;
        top: 4vw;
        display: flex;
        height: 8vw;
        align-items: center;
        left: 2.7vw;


        img{
            width: 6.7vw;
            height: 6.7vw;
        }

        span{
            font-size: 3.7vw;
        }
    }

    .top{
        height: 53.3vw;
        text-align: center;

        .title{
            font-size: 8vw;
            padding: 21.3vw 0 5.3vw 0;
        }
        
        p{
            color: #ABABAB;
            font-size: 3.7vw;

        }
    }

    .table{
        display: flex;
        flex-flow: column;
        justify-content: center;
        align-items: center;
    }

    #submit{
        width: 53.3vw;
        height: 13.3vw;
        margin: 5.3vw 0 8vw 0;
        border-radius: 6.7vw;
        border: none;
        background: #1272FE;
        color: #fff;
        font-size: 4.3vw;
    }

    #goRegister{
        color: #1272FE;
    }
</style>